<template>
    <div class="order-container">
        <div class="nav-container">
            <van-nav-bar
                    @click-left="onClickLeft"
                    @click-right="onClickRight"
            >
                <span slot="title" style="font-size: 18px; font-weight: bold;">我的</span>
                <van-icon name="setting" slot="right"/>
            </van-nav-bar>
        </div>

        <a href="javascript:;" class="user-info">
            <div class="avatar">
                <img src="../../../static/avatar/user2-160x160.jpg" alt="">
            </div>
            <div class="info">
                <span>sdsd</span>
            </div>
        </a>


        <div class="cell-more-box">
            <van-cell-group>
                <van-cell title="全部订单" icon="location" is-link :border="false" to="/shop"/>
                <van-cell title="我的收藏" icon="location" is-link :border="false" />
                <van-cell title="单元格" icon="location" is-link :border="false" />
            </van-cell-group>
        </div>



    </div>
</template>

<script>
    export default {
        name: "self-index",
        data() {
            return {

            }
        },
        methods: {
            onClickLeft() {
                this.$toast('返回');
            },
            onClickRight() {
                this.$toast('按钮');
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../styles/base/variables";
    .nav-container{
        .van-nav-bar{
            background: $vanNavBarBackground;
        }
    }
    .cell-more-box{
        .van-cell{
            border-bottom: 1px solid #e5e5e5;
        }
    }


    .user-info{
        width: 100%;
        height: 120px;
        border:1px solid red;
        display: flex;
        flex-direction: row;

        .avatar {
            width: 160px;
            border: 1px solid blue;
            display: flex;
            flex-direction: row;
            justify-content: center;
            img{
                align-self: center;
                border: 1px solid red;
                border-radius: 50%;
                width: 60px;
                height: 60px;
                display: inline-block;
            }
        }
        .info {
            width: 100%;
            height: 120px;
            border: 1px solid yellow;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

    }

</style>